<template>
<div style="background:white;height:auto">
    <div style="width:100%;height:36px;line-height:36px;padding-left:5%;background:rgba(242,242,242)">流程图</div>
    <div class="process">
        <div class="chuguo-lc-wrap">
            <ul class="lc-left">
                <li>
                    <div class="lc-title">
                        报案
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
                <li>
                    <div class="lc-title">
                        调度
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
                <li>
                    <div class="lc-title">
                        理算
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
                <li>
                    <div class="lc-title">
                        核赔
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
                <li>
                    <div class="lc-title">
                        结案
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
            </ul>
            <ul class="lc-right">
                <li>
                    <div class="lc-title">
                        立案
                    </div>
                    <div class="lc-content font-14">
                        <p>S:20-07-22 14:42</p>
                        <p>E:20-07-22 14:42</p>
                        <p>王斌(8000001420)</p>
                    </div>
                </li>
            </ul>
        </div>

    </div>

</div>
</template>

<script>
export default {
    components: {},
    data() {
        return {};
    },
    computed: {},
    watch: {},
    methods: {
        goPage() {
            console.log("1")
        }
    },
    created() {},
    mounted() {},
}
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.process {
    // width: 80%;
    margin: 50px auto;
}

.chuguo-lc-wrap {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    // display: flex;
    // background: url(../images/jmyz-lc-bg.png) no-repeat center top;
    background-size: auto 534px;
    height: 621px;
}

.chuguo-lc-wrap ul {
    width: 20%;
    // flex: 1;
}

.chuguo-lc-wrap ul.lc-right {
    margin-top: 56px;
}

.chuguo-lc-wrap ul li {
    list-style: none;
    position: relative;
    height: 140px;
    margin-bottom: 18px;
}

.chuguo-lc-wrap ul li .lc-title {
    color: #fff;
    background-color: #35516c;
    width: 80%;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 25px;
    text-align: center;
    z-index: 9;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 15px;
}

.chuguo-lc-wrap ul.lc-right li .lc-title {
    top: 0;
    right: 0;
    left: auto;
}

.chuguo-lc-wrap ul.lc-left li .lc-title::before {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid #304859;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    bottom: -11px;
    left: 0;
}

.chuguo-lc-wrap ul.lc-right li .lc-title::before {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid #304859;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: -11px;
    right: 0;
}

.chuguo-lc-wrap ul.lc-left li .lc-title::after {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: -13px;
    background: #35516c;
}

.chuguo-lc-wrap ul.lc-right li .lc-title::after {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: -13px;
    background: #35516c;
}

.chuguo-lc-wrap ul li .lc-content {
    position: absolute;
    top: 0;
    left: 10px;
    padding-top: 34px;
    width: 70%;
    padding-bottom: 12px;
    text-align: center;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
    color: #333;
    background-color: #f1f2f3;
    padding-left: 5px;
    padding-right: 5px;
}

.chuguo-lc-wrap ul.lc-right li .lc-content {
    left: auto;
    right: 10px;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(1) {
    top: 190px;
    // left: 110%;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(2) {
    top: 32px;
    left: 125%;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(3) {
    top: -125px;
    left: 245%;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(4) {
    top: -282px;
    left: 375%;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(5) {
    top: -440px;
    left: 490%;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title {
    background-color: #f6004b;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::before {
    border: 5px solid #ad003a;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(2) .lc-title::after {
    background: #f6004b;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title {
    background-color: #00b1b1;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::before {
    border: 5px solid #008183;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(3) .lc-title::after {
    background: #00b1b1;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title {
    background-color: #4a90e2;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::before {
    border: 5px solid #2a5f9c;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(4) .lc-title::after {
    background: #4a90e2;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title {
    background-color: #417505;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::before {
    border: 5px solid #335906;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.chuguo-lc-wrap ul.lc-left li:nth-child(5) .lc-title::after {
    background: #417505;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title {
    background-color: #ffcc00;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(1) {
    top: -830px;
    left: 40%;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::before {
    border: 5px solid #efa100;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(1) .lc-title::after {
    background: #ffcc00;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title {
    background-color: #005d8e;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::before {
    border: 5px solid #034c7b;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(2) .lc-title::after {
    background: #005d8e;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title {
    background-color: #d94135;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::before {
    border: 5px solid #a53626;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(3) .lc-title::after {
    background: #d94135;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title {
    background-color: #6d219b;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::before {
    border: 5px solid #4e3675;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(4) .lc-title::after {
    background: #6d219b;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title {
    background-color: #ab6b42;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::before {
    border: 5px solid #744224;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.chuguo-lc-wrap ul.lc-right li:nth-child(5) .lc-title::after {
    background: #ab6b42;
}
</style>
